{% extends 'base.html' %}
{% load  staticfiles %}
{% block aside %}
    <section class="vbox">
    <section class="scrollable">
      <section class="hbox stretch">
        <aside class="aside-lg bg-light lter b-r">
          <section class="vbox">
            <section class="scrollable">
              <div class="wrapper">
                <div class="text-center m-b m-t">
                  <a class="thumb-lg">
                    <img src="{{ follow_user.avatar.url }}" class="img-circle">
                  </a>
                  <div>
                    <div class="h3 m-t-xs m-b-xs">{{ follow_user.username }}</div>
                  </div>
                </div>
                <div class="panel wrapper">
                  <div class="row text-center">
                    <div class="col-xs-6">
                      <a>
                        <span id="fan" class="m-b-xs h4 block">{{ follow_user.fan_count }}</span>
                        <small class="text-muted">粉丝</small>
                      </a>
                    </div>
                    <div class="col-xs-6">
                      <a>
                        <span class="m-b-xs h4 block">{{ follow_user.follow_count }}</span>
                        <small class="text-muted">关注</small>
                      </a>
                    </div>
                  </div>
                </div>
                <div class="btn-group btn-group-justified m-b">
                {% if is_fan %}
                  <a id="follow" onclick="user_follow('{{ follow_user.id }}', '{{ user.id }}')" class="btn btn-success btn-rounded active">
                {% else %}
                  <a id="follow" onclick="user_follow('{{ follow_user.id }}', '{{ user.id }}')" class="btn btn-success btn-rounded">
                {% endif %}
                    <span class="text">
                      <i class="fa fa-eye"></i> 关注
                    </span>
                    <span class="text-active">
                      <i class="fa fa-eye"></i> 取消关注
                    </span>
                  </a>
                  <a class="btn btn-dark btn-rounded">
                    <i class="fa fa-comment-o"></i> Chat
                  </a>
                </div>
                <div>
                  <small class="text-uc text-xs text-muted">关于我</small>
                  <p>Artist</p>
                  <small class="text-uc text-xs text-muted">个人简介</small>
                  <p>{{ follow_user.summary }}</p>
                  <small class="text-uc text-xs text-muted">注册时间</small>
                  <p>{{ follow_user.date_joined }}</p>
                  <small class="text-uc text-xs text-muted">昵称</small>
                  <p>{{ follow_user.username }}</p>
                  <small class="text-uc text-xs text-muted">年龄</small>
                  <p>{{ follow_user.age }}</p>
                  <small class="text-uc text-xs text-muted">邮箱</small>
                  <p>{{ follow_user.email }}</p>
                  <div class="line"></div>
                  <small class="text-uc text-xs text-muted">联系方式</small>
                  <p class="m-t-sm">
                    <a href="#" class="btn btn-rounded btn-twitter btn-icon"><i class="fa fa-twitter"></i></a>
                    <a href="#" class="btn btn-rounded btn-facebook btn-icon"><i class="fa fa-facebook"></i></a>
                    <a href="#" class="btn btn-rounded btn-gplus btn-icon"><i class="fa fa-google-plus"></i></a>
                  </p>
                </div>
              </div>
            </section>
          </section>
        </aside>
        <aside class="bg-white">
          <section class="vbox">
            <header class="header bg-light lt">
              <ul class="nav nav-tabs nav-white">
                <li class="active"><a href="#trends" data-toggle="tab">他的动态</a></li>
              </ul>
            </header>
            <section class="scrollable">
              <div class="tab-content">
                <div class="tab-pane active" id="trends">
                <section class="panel-body">
                  {% for trend in trend_list %}
                      <article class="media">
                        <span class="pull-left thumb-sm"><img class="img-circle" alt="..." src="{{ trend.user.avatar.url }}"></span>
                        <div class="media-body">
                          <div class="pull-right media-xs text-center text-muted">
                            <strong class="h4">{{ trend.trend_time }}</strong><br>
                          </div>
                          <a class="h4">{{ trend.user.username }} {{ trend.content }}</a>
                          <small class="block"><a></a></small>
                        </div>
                      </article>
                      <div class="line b-b"></div>
                  {% endfor %}
                  </section>
                </div>
              </div>
            </section>
          </section>
        </aside>
        <aside class="col-lg-3 b-l">
          <section class="vbox">
            <section class="scrollable padder-v">
              <div class="panel">
                <h4 class="font-thin padder">未读消息</h4>
                <ul class="list-group">
                {% for notification in request.user.notifications.unread %}
                  <li class="list-group-item">
                      <p>{{ notification.verb }}《{{ notification.target }}》</p>
                      <small class="block text-muted"><i class="fa fa-clock-o"></i> {{ notification.timesince }} 之前</small>
                  </li>
                {% empty %}
                    <li class="list-group-item">
                      <p>没有未读消息</p>
{#                      <small class="block text-muted"><i class="fa fa-clock-o"></i> {{ notification.timesince }} 之前</small>#}
                  </li>
                {% endfor %}
                </ul>
              </div>
            </section>
          </section>
        </aside>
      </section>
    </section>
<script src="{% static 'js/jquery.min.js' %}"></script>
<script>
    // 变更用户关注状态
    function user_follow(follow_id, fan_id) {
        $.post("{% url 'user:user_follow' %}", {
                'follow_id': follow_id,
                'fan_id': fan_id
            },
        function (data) {
            if (data.status === 'ok'){
                $("#follow").addClass('active');
                $("#fan").text(data.fan_count)
            }
            else {
                $("#follow").removeClass('active');
                $("#fan").text(data.fan_count)
            }
        }
        )
    }
</script>
{% endblock aside %}